.home {

  .container {
    width: 1400px;
    margin: 60px auto;

    .page_link {
      display: flex;
      color: #3D3D3D;
      font-size: 16px;

      p {
        margin: 0;
      }

      a {
        color: #3D3D3D;
      }

      a:last-child {
        color: #C71D1D;
      }
    }

    .section {
      margin: 15px 0;

      .title1 {
        position: relative;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        img {
          width: 100%;
          display: block;
          object-fit: contain;
        }

        p {
          font-size: 20px;
          color: #141414;
          font-weight: bold;
          position: absolute;
          left: 28px;
          bottom: 8px;
          margin: 0;
        }
      }

      .boxs {
        margin: 51px 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .box {
          width: 48%;
          margin-bottom: 60px;

          .title {
            display: flex;
            justify-content: space-between;
            padding: 0 15px 0 0;
            background: white;
            margin-bottom: 25px;
            box-shadow: 0 0 10px rgba(0, 0, 0, .2);

            .l {
              display: flex;

              .item {
                display: flex;
                align-items: center;
                width: 100%;
                justify-content: center;
                padding:8px 0 8px 15px;
                position: relative;
                margin-right: 40px;
                cursor: pointer;

                .icon {
                  width: 22px;
                  display: block;
                  position: relative;
                  z-index: 1;
                  transform: translateY(-1px);
                }

                p {
                  font-size: 20px;
                  color: white;
                  margin: 0 0 0 10px;
                  font-weight: bold;
                  position: relative;
                  z-index: 1;
                  transform: translateY(-2px);
                }

                .bg {
                  position: absolute;
                  left: -1px;
                  height: 100%;
                  top: -7px;
                  opacity: 1;
                  transition: all 600ms;

                  img {
                    display: block;
                    object-fit: contain;
                    width: 160px;
                  }
                }
              }
            }

            a {
              display: flex;
              align-items: center;

              p {
                margin: 0;
                font-size: 14px;
                color: #808081;
              }

              img {
                display: block;
                width: 6px;
                margin-left: 10px;
              }
            }
          }

          .allItems {
            .flex{
              display: flex;
              justify-content: space-between;
              .pic{
                overflow: hidden;
                img{
                  width: 227px;
                  height: 146px;
                  display: block;
                  object-fit: cover;
                  transition: all 600ms;
                }
                &:hover{
                  img{
                    transform: scale(1.05);
                  }
                }
              }
              .items{
                width: calc(98% - 227px);
                a {
                  border-bottom: 1px dashed rgba(61, 61, 61, .3);
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  padding: 13.5px 0;
                  p{
                    margin: 0;
                  }
                  .l {
                    display: flex;
                    align-items: center;
                    width: calc(100% - 120px);
  
                    .icon {
                      margin: 0 10px 0 15px;
  
                      img {
                        width: 14px;
                        display: block;
                        filter: grayscale(80%);
                        opacity: .6;
                        transition: all 600ms;
                      }
                    }
  
                    p {
                      color: #3D3D3D;
                      font-size: 16px;
                      transition: all 600ms;
                      font-weight: 500;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      overflow: hidden;
                      position: relative;
                      &::after {
                        content: attr(data-title);
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        display: block;
                        color: #C71D1D;
                        font-weight: bold;
                        font-size: 16px;
                        opacity: 0;
                        transition: all 600ms;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                      }
                    }
                  }
  
                  .time {
                    color: rgba(128, 128, 129, 1);
                    font-size: 16px;
                    transition: all 600ms;
                  }
  
                  &:hover {
                    .l {
                      .icon {
                        img {
                          filter: grayscale(0);
                        }
                      }
  
                      p {
                        color: transparent;
  
                        &::after {
                          opacity: 1;
                        }
                      }
                    }
  
                    .time {
                      color: #C71D1D;
                    }
                  }
                }
              }
            }
            .list {
              a {
                border-bottom: 1px dashed rgba(61, 61, 61, .3);
                display: flex;
                justify-content: space-between;
                align-items: center;

                .l {
                  display: flex;
                  align-items: center;
                  width: calc(100% - 120px);

                  .icon {
                    margin: 0 10px 0 15px;

                    img {
                      width: 14px;
                      display: block;
                      filter: grayscale(80%);
                      opacity: .6;
                      transition: all 600ms;
                    }
                  }

                  p {
                    color: rgba(61, 61, 61, 1);
                    font-size: 16px;
                    transition: all 600ms;
                    font-weight: 500;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    position: relative;

                    &::after {
                      content: attr(data-title);
                      position: absolute;
                      left: 0;
                      top: 0;
                      width: 100%;
                      display: block;
                      color: #C71D1D;
                      font-weight: bold;
                      font-size: 16px;
                      opacity: 0;
                      transition: all 600ms;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      overflow: hidden;
                    }
                  }
                }

                .time {
                  color: rgba(128, 128, 129, 1);
                  font-size: 16px;
                  transition: all 600ms;
                  margin-right: 0;
                }

                &:hover {
                  .l {
                    .icon {
                      img {
                        filter: grayscale(0);
                      }
                    }

                    p {
                      color: transparent;

                      &::after {
                        opacity: 1;
                      }
                    }
                  }

                  .time {
                    color: #C71D1D;
                  }
                }
              }

              a:last-child {
                border-bottom: none;
              }
            }
          }
        }
      }

    }
  }

  @media screen and (max-width: 1441px) {
    .container {
      width: 90%;
    }
  }

  @media screen and (max-width: 768px) {
    .container {
      margin: 80px auto;

      .section {
        .title1 {
          padding-bottom: 20px;
          img {
            height: 60px;
              width: 97%;
              margin-left: 3%;
          }

          p {
            font-size: 16px;
            bottom: 10px;
            left: 3%;
          }
        }
        .boxs{
          margin: 30px 0;
          .box{
            width: 100%;
            margin-bottom: 30px;
            .title{
               margin-bottom: 20px;
            }
            .allItems{
              .flex{
                flex-direction: column;
                .pic{
                  img{
                    width: 100%;
                    height: auto;
                  }
                }
                .items{
                  width: 100%;
                  margin-top: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}